<template>
  <div>
    <div class="tree3">
      <el-form :inline="true" :model="formInline">
        <el-form-item label="">
          <el-input v-model="formInline.searchword" type="text" placeholder="search..." size="mini" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <vue-scroll style="height:90%"><v-tree ref="tree1" :data="treeData" :radio="true" :tpl="tpl" /></vue-scroll>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    treeData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formInline: {
        searchword: ''
      }
    }
  },
  methods: {
    tpl(...args) {
      const { 0: node } = args
      let titleClass = node.selected ? 'node-title node-selected' : 'node-title'
      if (node.searched) titleClass += ' node-searched'
      return <span>
        {node.expanded && node.children && node.children.length > 0 ? <font-awesome-icon icon='folder-open' /> : <font-awesome-icon icon='folder' />}
        <span class={titleClass} domPropsInnerHTML={node.title} onClick={() => {
          if (node.type !== 1) {
            this.$emit('hideBtn')
          }
          if (node.type === 1) {
            this.$emit('getTable', node)
            node.expanded = !node.expanded
            this.$refs.tree1.nodeSelected(node)
          }
        }}></span>
      </span>
    },
    search() {
      this.$refs.tree1.searchNodes(this.formInline.searchword)
    }
  }
}
</script>

<style lang="scss" scoped>
.tree3 {
  float: left;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px dotted #ccccdd;
  overflow: hidden;
  height: calc(100vh - 84px);
}
.tree-search-input {
  width: 60%;
  padding: 6px 8px;
  outline: none;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.tree-search-btn {
  width: 25%;
  padding: 6px 8px;
  outline: none;
  border-radius: 6px;
  background-color: rgb(218, 218, 218);
  border: 1px solid rgb(226, 225, 225);
  color: rgb(117, 117, 117);
}
.halo-tree {
  padding: 0;
  margin: 0;
}
.halo-tree .tree-node-el {
  background-color: bule;
}
.halo-tree .node-selected {
  border: 1px solid #ddd;
  background-color: #ddd;
}
svg[data-icon] {
  color: #efd86d;
}
.el-form--inline .el-form-item {
  margin: 0;
}
.tree-scroll-content {
  overflow: scroll;
  height: calc(100vh - 118px);
  // transform: translate(-2px, -5px);
  width: 100%;
}
.__vuescroll.hasVBar {
  height: calc(100vh - 150px);
}
</style>

<style>
.halo-tree .node-title {
  display: inline-block;
}
.halo-tree .tree-node-el {
  min-width: 250px;
  background-color: rgba(0, 0, 0, 0);
}
</style>
